﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>List</title>
    <script type="text/javascript" src="../scripts/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="../scripts/mKook.js"></script>
    <script type='text/javascript' src='../scripts/knockout-2.1.0.js'></script>
    <script type='text/javascript' src='../scripts/jquery.mobile-1.2.0-pre.js'></script>
    <link href="../Content/jquery.mobile-1.2.0-pre.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>List form</h1>
        </div>
        <div data-role="content">
            <form id="listForm" name="listForm" action="">
            <ul data-role="listview" data-bind="foreach: data.items">
                <li>
                    <div>
                        <span data-bind="text: key"></span>
                        <br />
                        <span style="font-size: 10px" data-bind="visible: $root.data.showRenderTimes">(item rendered on <span data-bind="text: new Date().toLocaleString()"></span>)</span>
                    </div>
                </li>
            </ul>
            </form>
        </div>
        <div data-role="footer">
            <p style="font-size: 10px; margin: 10px">© 2012 Danfoss and other contributors</p>
        </div>
    </div>
    <script type="text/javascript">
        var myItem = function (key) {
            this.key = key;
        }

        function viewModel() {
            var $this = this;
            $this.data = {
        title: 'Object list',
        items: ko.observableArray([new myItem('First'), new myItem('Second'), new myItem('Third')]),
        showRenderTimes: ko.observable(true)
    };
        };

        ko.applyBindings(new viewModel());
    </script>
</body>
</html>
